﻿<!doctype html>
<html lang="en">
<head>
    <title>LineChart - AJAX Data</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/raphael.js" type="text/javascript"></script>
    <script src="../../external/raphael-popup.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijlinechart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var netflx = "http://odata.netflix.com/Catalog/Genres('Horror')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc";

            $.ajax({
                dataType: "jsonp",
                url: netflx,
                jsonpCallback: "callback",
                success: callback
            });
        });

        function callback(result) {
            // unwrap result
            var names = [];
            var ratings = [];

            var movies = result["d"]["results"];

            for (var i = 0; i < movies.length; i++) {

                names.push(movies[i].Name);
                ratings.push(movies[i].AverageRating);
            }

            $("#wijlinechartDefault").wijlinechart({
            	axis: {
            		y: {
            			text: "Average Rating",
            			min: 0,
            			max: 5,
            			autoMin: false,
            			autoMax: false
            		},
            		x: {
            			text: "",
            			labels: {
            				style: {
            					rotation: -45
            				}
            			}
            		}
            	},
            	hint: {
            		formatter: function () {
            			return this.x + '\n ' + this.y + '';
            		}
            	},
            	header: {
            		text: "Top 10 Movies by Genre - Netflix OData"
            	},
            	seriesList: [
                    {
                    	label: "Horror",
                    	legendEntry: true,
                    	fitType: "spline",
                    	data: {
                    		x: names,
                    		y: ratings
                    	},
                    	markers: {
                    		visible: true,
                    		type: "circle"
                    	}
                    }
                ]
            });
        }

       
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                External Data</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="wijlinechartDefault" style="width: 800px; height: 400px" class="ui-widget ui-widget-content ui-corner-all">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                This sample uses JSONP data from the Netflix OData feed.
            </p>
            <ul>
                <li>Data URL: <a href="http://odata.netflix.com/Catalog/Genres('Horror')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc">http://odata.netflix.com/Catalog/Genres('Horror')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc</a> </li>
                <li>API Documentation: <a href="http://developer.netflix.com/docs/oData_Catalog">http://developer.netflix.com/docs/oData_Catalog</a> </li>
            </ul>
        </div>
    </div>
</body>
</html>
